<template>
  <div>
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      top="5vh"
      @close.native="cancel"
      :close-on-click-modal="false">
      <el-form ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="120px">
        <el-form-item label="需求名称："
          prop="name">
          <el-input v-model="form.name"
            placeholder="请输入需求名称"
            :disabled="isLook" />
        </el-form-item>
        <el-form-item label="需求类别："
          prop="typeName">
          <el-input v-model="form.typeName"
            placeholder="请输入需求类别"
            :disabled="isLook" />
        </el-form-item>
        <el-form-item label="领域名称："
          prop="domainName">
          <el-input v-model="form.domainName"
            placeholder="请输入领域名称"
            :disabled="isLook" />
        </el-form-item>
        <el-form-item label="单位："
          prop="departmentName">
          <el-input v-model="form.departmentName"
            placeholder="请输入单位"
            :disabled="isLook" />
        </el-form-item>
        <el-form-item label="提报人："
          prop="reporter">
          <el-input v-model="form.reporter"
            placeholder="请输入提报人"
            :disabled="isLook" />
        </el-form-item>
        <el-form-item label="需求内容："
          prop="requirementContent">
          <el-input v-model="form.requirementContent"
            type="textarea"
            rows="7"
            placeholder="请输入需求内容"
            :disabled="isLook" />
        </el-form-item>
        <el-form-item label="需求文件："
          prop="remark">
          <el-upload v-if="!isLook"
            ref="uploadRef"
            class="upload-demo"
            action="#"
            :limit="1"
            :on-change="handleChange"
            :auto-upload="false"
            :show-file-list="false"
            :on-exceed="handleExceed"
            :accept="accept">
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
            </template>
            <div slot="tip"
              class="el-upload__tip">
              只支持上传.doc/.docx/.pdf文件
            </div>
            <div slot="tip"
              class="el-upload__tip"
              v-if="form.requirementFileName">
              <el-tag closable
                @close="closeFile">
                {{form.requirementFileName}}
              </el-tag>
            </div>
          </el-upload>
          <!-- <el-tooltip v-else
            class="item"
            effect="dark"
            :content="form.requirementFileName?'点击下载文件':'暂无文件'"
            placement="top">
            <el-link style="padding-top: 5px;"
              type="primary"
              :underline="false"
              @click="downloadLink(form)">
              {{ form.requirementFileName?form.requirementFileName:'暂无文件' }}
            </el-link>
          </el-tooltip> -->
          <div v-else
            style="padding-top: 5px;">
            <el-link type="primary"
              :underline="false">
              {{ form.requirementFileName?form.requirementFileName:'暂无文件' }}
            </el-link>
            <el-button style="margin-left: 15px;"
              type="primary"
              size="mini"
              :underline="false"
              @click="lookLink(form)">
              预览
            </el-button>
            <el-button style="margin-left: 15px;"
              type="primary"
              size="mini"
              :underline="false"
              @click="downloadLink(form)">
              下载
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitForm"
          v-if="!isLook">确 定</el-button>
        <el-button @click="
          cancel">取 消</el-button>
      </div>
    </el-dialog>
    <PreviewPdf v-if="showPdf"
      :pdfUrl="pdfUrl"
      @closeLookPdf="closeLookPdf" />
  </div>
</template>

<script>
import { uploadFile, deleteFile, getWord2Pdf } from '@/api/common.js'
import { addRequirement, updateRequirement } from '@/api/requirement.js'
import PreviewPdf from '@/views/common/previewPdf.vue'
export default {
  components: { PreviewPdf },
  data() {
    return {
      showPdf: false,
      pdfUrl: null,
      dialogVisible: false,
      isLook: false,
      accept: '.doc,.docx,.pdf',
      title: '',
      form: {
        name: '',
        domainName: '',
        departmentName: '',
        requirementContent: '',
        requirementFileName: '',
        requirementFilePath: '',
        requirementFileOriginPath: ''
      },
      rules: {
        name: [
          { required: true, message: '需求名称不能为空！', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '单位名称不能为空！', trigger: 'blur' }
        ],
        requirementContent: [
          { required: true, message: '需求内容不能为空！', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  methods: {
    show(obj) {
      this.dialogVisible = true
      this.title = obj.title
      if (this.title == '详情') {
        this.isLook = true
      }
      if (obj.data) {
        this.form = Object.assign(obj.data)
      }
    },
    downloadLink(item) {
      this.downloadByUrl(item.fileName, item.requirementFilePath)
    },
    lookLink(item) {
      let txt = this.getMatchType(item.requirementFilePath)
      if (txt === 'word') {
        getWord2Pdf({ wordPath: item.requirementFilePath }).then(res => {
          if (res.data) {
            this.lookPdf(res.data)
          } else {
            this.$message.warning('暂无法预览，请下载后查看！')
          }
        })
      } else {
        if (txt === 'pdf') {
          this.lookPdf(item.requirementFilePath)
        } else {
          this.$message.warning('文件不支持预览！')
        }
      }
    },
    lookPdf(url) {
      this.pdfUrl = url
      this.showPdf = true
    },
    closeLookPdf() {
      this.showPdf = false
      this.pdfUrl = null
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateRequirement(this.form).then(() => {
              this.cancel()
            })
          } else {
            addRequirement(this.form).then(() => {
              this.cancel()
            })
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.isLook = false
      this.$emit('close')
    },
    handleChange(file) {
      const _file = file?.raw ?? file
      const formData = new FormData()
      formData.append('file', _file)
      formData.append('pathType', file.name.split('.').pop())
      uploadFile(formData).then(res => {
        this.form.requirementFileName = res.data.fileName
        this.form.requirementFileOriginPath = res.data.filePath
        this.form.requirementFilePath = res.data.servicePath
      })
      // this.form.fileUpload = file.raw
      // console.log('[ file ] >', this.form.fileUpload)
    },
    // 多次上传覆盖
    handleExceed(file) {
      this.$refs.uploadRef.clearFiles()
      this.handleChange(file[0])
    },
    closeFile() {
      deleteFile({ files: [this.form.requirementFileOriginPath] }).then(() => {
        this.form.requirementFileName = ''
        this.form.requirementFileOriginPath = ''
        this.form.requirementFilePath = ''
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>